<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;

            /* 边框 */
            /* 
                border-width用来设置边框的宽度
                    - 如果指定四个值，则四个值分别为 上 右 下 左
                    - 如果指定三个值，则三个值分别为 上 左右 下
                    - 如果指定两个值，则两个值分别为 上下 左右 
                    - 如果指定一个值，则同时指定上下左右
                除了有boder-width外
                    还有四个 border-xxx-width 用来分别指定四个边框的宽度
                        xxx 可以是 top right bottom left

            */
            /* border-width: 10px; */
            /* border-top-width: 10px;
            border-right-width: 20px;
            border-bottom-width: 30px;
            border-left-width: 40px; */

            /* 
                border-color 边框的颜色
                    - 也是可以分别指定四个边框的颜色，规则同border-width
            */
            /* border-color: red ; */

            /* 
                border-style 边框的样式
                    可选值：
                        - solid 实线边框
                        - double 双线边框
                        - dotted 点状虚线
                        - dashed 虚线边框
                    - 也可以分别指定四个方向的边框，规则同border-width
            */
            /* border-style: dashed double dotted solid; */

            /* 
                border 简写属性，可以同时设置四个边框的宽度 颜色 和 样式
                    除了border还有
                        border-top
                        border-right
                        border-bottom
                        border-left
            */
            border:10px red solid;
            /* border-top:none */
        }
        
        

    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>